<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单构造器</title>
    <!-- jquery -->
    <script src="assets/vendors/jquery/jquery.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css">
    <script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>

    <!-- formBuilder -->
    <link rel="stylesheet" href="assets/vendors/form-builder/css/form-builder.css">
    <script src='assets/vendors/form-builder/js/jquery-ui.min.js'></script>
    <script src='assets/vendors/form-builder/js/form-builder.js'></script>

    <!-- highlight.js -->
    <link rel="stylesheet" href="assets/vendors/highlight/css/highlight.min.css">
    <script src="assets/vendors/highlight/js/highlight.min.js"></script>

    <!-- PNotify -->
    <link rel="stylesheet" href="assets/vendors/pnotify/css/pnotify.min.css">
    <link rel="stylesheet" href="assets/vendors/pnotify/css/pnotify.buttons.min.css">
    <link rel="stylesheet" href="assets/vendors/pnotify/css/pnotify.history.min.css">
    <script src="assets/vendors/pnotify/js/pnotify.min.js"></script>
    <script src="assets/vendors/pnotify/js/pnotify.animate.min.js"></script>
    <script src="assets/vendors/pnotify/js/pnotify.buttons.min.js"></script>
    <script src="assets/vendors/pnotify/js/pnotify.callbacks.min.js"></script>
    <script src="assets/vendors/pnotify/js/pnotify.confirm.min.js"></script>
    <script src="assets/vendors/pnotify/js/pnotify.history.min.js"></script>
    <script src="assets/vendors/pnotify/js/pnotify.tooltip.min.js"></script>

    <!-- bootstrap-datepicker -->
    <link rel="stylesheet" href="assets/vendors/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
    <script src="assets/vendors/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="assets/vendors/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

    <!-- icheck -->
    <link rel="stylesheet" href="assets/vendors/icheck/css/blue.css">
    <script src="assets/vendors/icheck/js/icheck.min.js"></script>

    <!-- bootstrap-colorpicker -->
    <link rel="stylesheet" href="assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
    <script src="assets/vendors/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

    <!-- Animate -->
    <link rel="stylesheet" href="assets/vendors/animate-css/animate.css">

    <!-- css主文件 -->
    <link rel="stylesheet" href="assets/css/main.css">

</head>

<body>
    <!-- 编辑部分 -->
    <div class="container fb-editor-wrapper active">
        <div class="btn-toolbar fb-toolbar" role="toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-primary form-builder-language" data-language="zh" disabled>简体中文</button>
                <button type="button" class="btn btn-default form-builder-language" data-language="en">English</button>
            </div>
            <div class="clearfix"></div>
            <hr>
        </div>
        <div id="fb-editor"></div>
    </div>

    <!-- 预览部分 -->
    <div class="container fb-preview-wrapper">
        <div class="btn-toolbar fb-toolbar" role="toolbar">
            <button type="button" class="btn btn-primary form-builder-back"><span class="glyphicon glyphicon-arrow-left"></span>&nbsp;返回</button>

            <div class="btn-group">
              <button type="button" class="btn btn-default" id="formSubmitBtn"><span class="glyphicon glyphicon-wrench"></span>&nbsp;表单测试验证按钮</button>
              <button type="button" class="btn btn-default" id="formHtmlWatchBtn"><span class="glyphicon glyphicon-search"></span>&nbsp;表单HTML查看</button>
            </div>

            <div class="input-group fb-resources">
                <span class="input-group-btn">
                    <button class="btn btn-danger" type="button" id="formResourcesBtn"><span class="glyphicon glyphicon-ban-circle"></span>&nbsp;自定义资源路径</button>
                </span>
                <input type="text" class="form-control" id="formResourcesInput" disabled>
            </div>

            <div class="clearfix"></div>
            <hr>
        </div>
        <div id="fb-preview">
        </div>



        <!-- 表单HTML查看模态框 -->
        <div class="modal fade" id="formHtmlWatchModal" tabindex="-1" role="dialog" aria-labelledby="formHtmlWatchModal" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                        <h5 class="modal-title" id="formHtmlWatchModalLabel">表单HTML</h5>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-sm" id="formHtmlExportBtn">导出html文件</button>
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <script>

        // 定义生成html中的资源路径前缀
        var resourcesPrefix = ''
    </script> -->
    <!-- js主入口 -->
    <script src="assets/js/app.js"></script>
</body>

</html>
